<template>
    <div class="table-container">
        <table><thead>
            <tr>
                <th v-for="price_attr in price_attrs">{{ price_attr }}</th>
            </tr>
        </thead>
            <tbody>
                <tr v-for="line in price_lines">
                    <td v-for="price_attr in price_attrs">{{line[price_attr]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="margin-top: 5px;"><input type="number" v-model="num">条/页；第<input type="number" v-model="index">页<button @click.stop="get_lines()">刷新</button></div>
</template>
<script>

import axios from 'axios';
export default{
    data(){
        return{
            price_lines:[],
            num:50,
            index:0,
            err:"",
            price_attrs:[]
        }
    },
    inject:["need_wait","neednt_wait","set_err"],
    methods:{
        get_lines(){
            this.need_wait()
            axios.get("/price",{params:{"num":this.num,"index":this.index}})
            .then(response=>{
                this.price_lines = response.data.data
                this.set_err(response.data.err)
                this.price_attrs = Object.keys(this.price_lines[0])
                this.neednt_wait()
            })
            .catch((error)=> {
                this.set_err(error);
            });
        }
    },
    mounted(){
        this.get_lines()
    }
}
</script>
<style scoped>
table{
    width: 1752px;
}
td,th{
    border-style: solid;
    border-color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
}
.table-container{
    overflow-x: auto;
    overflow-y: auto;
    height: 690px;
}
</style>
<style>

</style>